<!--学生成绩管理-->
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="100px"
    >
      <el-form-item label="切换成绩">
        <el-cascader
          v-model="queryParams.gradeId"
          placeholder="请选择班级年份"
          filterable
          :options="options"
          :show-all-levels="false"
          style="width: 200px"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:user:import']"
          >导入学生成绩</el-button
        >
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="studentscoretestList"
      lazy
      @expand-change="handleExpandChange"
    >
      <el-table-column type="expand" width="55" align="center">
        <template slop-scope="scope">
        <el-form label-position="left" inline class="demo-table-expand">
          <br />
          <div class="reportTitle">成长报告1</div>
          <br /><br />
          <el-table
          class="table"
          :data="tableData1"
          border
          :header-cell-style="{ background: '#9c0000', color: '#ffffff' }"
        >
          <el-table-column label="学科" prop="course" width="190" />
          <el-table-column label="语文" prop="语文" width="190" />
          <el-table-column label="数学" prop="数学" width="190" />
          <el-table-column label="英语" prop="英语" width="190" />
          <el-table-column label="科学" prop="科学" />
          <el-table-column prop="make" label="操作">
            <template slot-scope="scope">
              <el-button plain size="mini" @click="handleEdit1(scope.$index, scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <div class="reportTitle">成长报告2</div>
        <br/><br />
        <el-table
          class="table"
          :data="tableData2"
          :key="tableKey2"
          border
          :header-cell-style="{ background: '#808285', color: '#ffffff' }"
        >
          <el-table-column label="学科" prop="学科1" width="237" />
          <el-table-column label="综合评价" prop="综合评价1" width="237" />
          <el-table-column label="学科" prop="学科2" width="237" />
          <el-table-column label="综合评价" prop="综合评价2" />
          <el-table-column prop="make" label="操作">
            <template slot-scope="scope">
              <el-button
                plain
                size="mini"
                @click="handleEdit2(scope.$index, scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <br />
        <div class="reportTitle">校园表现报告</div>
        <br /><br />
        <el-table
          class="table"
          :data="tableData3"
          border
          :header-cell-style="{ background: '#9c0000', color: '#ffffff' }"
        >
          <el-table-column label="内容" prop="内容1" width="237" />
          <el-table-column label="综合评价" prop="综合评价1" width="237" />
          <el-table-column label="内容" prop="内容2" width="237" />
          <el-table-column label="综合评价" prop="综合评价2" />
          <el-table-column prop="make" label="操作">
            <template slot-scope="scope">
              <el-button
                plain
                size="mini"
                @click="handleEdit3(scope.$index, scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <div class="reportRemaks">综合评价等第 AAA AA A</div>
        </el-form>
      </template>
      </el-table-column>
      <el-table-column label="学号" align="center" prop="studentId" />
      <el-table-column label="姓名" align="center" prop="学生姓名" />
      <el-table-column label="班级" align="center" prop="班级" />
      <el-table-column label="身高(cm)" align="center" prop="身高" />
      <el-table-column label="体重(kg)" align="center" prop="体重" />
      <el-table-column label="视力(左)" align="center" prop="左眼" />
      <el-table-column label="视力(右)" align="center" prop="右眼" />
      <!-- <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:studentscoretest:edit']"
            >修改</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 修改成绩1的弹框 -->
      <el-dialog title="成长报告1" :visible.sync="dialogVisible2" width="30%">
        <el-form ref="form" :model="form1" label-width="100px">
          <el-form-item label="语文" label-height="100px">
            <el-input v-model="form1.chinese"></el-input>
          </el-form-item>
          <el-form-item label="数学" label-height="100px">
            <el-input v-model="form1.math"></el-input>
          </el-form-item>
          <el-form-item label="英语" label-height="100px">
            <el-input v-model="form1.english"></el-input>
          </el-form-item>
          <el-form-item label="科学" label-height="100px">
            <el-input v-model="form1.science"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="btn1" @click="queding2">确 定</el-button>
          <el-button class="btn2" @click="dialogVisible2 = false"
            >取 消</el-button
          >
        </span>
      </el-dialog>
      <!-- 修改成绩2的弹框 -->
      <el-dialog title="成长报告2" :visible.sync="dialogVisible3" width="30%">
        <el-form ref="form" :model="form2" label-width="100px">
          <el-form-item label="学科" label-height="100px">
            <el-input v-model="form2.xueke1"></el-input>
          </el-form-item>
          <el-form-item label="综合评价" label-height="100px">
            <el-input v-model="form2.pingjia1"></el-input>
          </el-form-item>
          <el-form-item label="学科" label-height="100px">
            <el-input v-model="form2.xueke2"></el-input>
          </el-form-item>
          <el-form-item label="综合评价" label-height="100px">
            <el-input v-model="form2.pingjia2"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="btn1" @click="queding3">确 定</el-button>
          <el-button class="btn2" @click="dialogVisible3 = false"
            >取 消</el-button
          >
        </span>
      </el-dialog>
      <!-- 修改成绩3的弹框 -->
      <el-dialog title="成长报告3" :visible.sync="dialogVisible4" width="30%">
        <el-form ref="form" :model="form3" label-width="100px">
          <el-form-item label="内容" label-height="100px">
            <el-input v-model="form3.content1"></el-input>
          </el-form-item>
          <el-form-item label="综合评价" label-height="100px">
            <el-input v-model="form3.pingjia1"></el-input>
          </el-form-item>
          <el-form-item label="内容" label-height="100px">
            <el-input v-model="form3.content2"></el-input>
          </el-form-item>
          <el-form-item label="综合评价" label-height="100px">
            <el-input v-model="form3.pingjia2"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="btn1" @click="queding4">确 定</el-button>
          <el-button class="btn2" @click="dialogVisible4 = false"
            >取 消</el-button
          >
        </span>
      </el-dialog>
    <!-- 用户导入学生成绩对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit=1
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载学生成绩模板</el-link
          >
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listStudentscoretest,
  getClassGradeAPI,
  achevementUpdataAPI,
} from "@/api/system/studentscoretest";
import { getToken } from "@/utils/auth";
export default {
  name: "Studentscoretest",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      studentscoretestList: [],
      tableData1: [{ course: "考试成绩" ,语文: '', 数学: '', 英语: '', 科学: ''}],
      tableData2: [{
        "综合评价1": "",
        "综合评价2": "",
      }, {
        "综合评价1": "",
        "综合评价2": "",
      }, {
        "综合评价1": "",
        "综合评价2": "",
      }],
      tableData3: [{
        "综合评价1": "",
        "综合评价2": "",
      }, {
        "综合评价1": "",
        "综合评价2": "",
      }],
      tableKey2: "",
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      dialogVisible: true,
      // treeList: [],
      // 存放年级班级学期数据
      options: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        gradeId: "202101",
        semesterYearName: "2026第二学期",
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/studentScore/importData",
      },
       //学生基本信息的弹框
      dialogVisible1: false,
      //成绩1的弹框
      dialogVisible2: false,
      //成绩2的弹框
      dialogVisible3: false,
      //成绩3的弹框
      dialogVisible4: false,
      //学生基本信息的修改框
      form: {
        name: "",
        gradeId: "",
        tall: "",
        weight: "",
        eyesLeft: "",
        eyeRight: "",
      },
      //成长报告1修改框
      form1: {
        chinese: "",
        math: "",
        english: "",
        science: "",
      },
      //成长报告2修改框
      form2: {
        xueke1: "",
        pingjia1: "",
        xueke2: "",
        pingjia2: "",
      },
      //成长报告3修改框
      form3: {
        content1: "",
        pingjia1: "",
        content2: "",
        pingjia2: "",
      },
      count:0,
    };
  },
  created() {
    this.getList();
    this.getClassGrade();
  },
  methods: {
    handleExpandChange(row){
      if(this.count!=0){
        // alert('666')
        this.updataAchievement();
        this.count=0
      }else{
        this.basicMessage=row
        
        this.tableData1[0]["语文"] = this.basicMessage["成绩"]["语文"];
        this.tableData1[0]["数学"] = this.basicMessage["成绩"]["数学"];
        this.tableData1[0]["英语"] = this.basicMessage["成绩"]["英语"];
        this.tableData1[0]["科学"] = this.basicMessage["成绩"]["科学"];

        this.tableData2[0]["学科1"] = "道德与法治";
        this.tableData2[0]["学科2"] = "体育";
        this.tableData2[1]["学科1"] = "音乐";
        this.tableData2[1]["学科2"] = "信息";

        this.tableData2[2]["学科1"] = "美术";
        this.tableData2[2]["学科2"] = "综合实践";

        this.tableData3[0]["内容1"] = "听课专注";
        this.tableData3[1]["内容1"] = "学习主动";
        this.tableData3[1]["内容2"] = "同学合作";
        this.tableData3[0]["内容2"] = "做事负责";


        this.tableData2[0]["综合评价1"] = this.basicMessage["综合评价等第"]["道德与法治"];
        this.tableData2[0]["综合评价2"] = this.basicMessage["综合评价等第"]["体育"];

        this.tableData2[1]["综合评价1"] = this.basicMessage["综合评价等第"]["音乐"];
        this.tableData2[1]["综合评价2"] = this.basicMessage["综合评价等第"]["信息"];

        this.tableData2[2]["综合评价1"] = this.basicMessage["综合评价等第"]["美术"];
        this.tableData2[2]["综合评价2"] = this.basicMessage["综合评价等第"]["综合实践"];

        this.tableData3[0]["综合评价1"] = this.basicMessage["综合评价等第"]["听课专注"];
        this.tableData3[0]["综合评价2"] = this.basicMessage["综合评价等第"]["做事负责"];

        this.tableData3[1]["综合评价1"] = this.basicMessage["综合评价等第"]["学习主动"];
        this.tableData3[1]["综合评价2"] = this.basicMessage["综合评价等第"]["同学合作"];
      }
    },
    handleChange(value) {
      this.queryParams.gradeId = value[1];
      this.queryParams.semesterYearName = value[2];
      this.getList();
    },
    //获取每个班级、年级的信息
    async getClassGrade() {
      const res = await getClassGradeAPI();
      let res1 = res.data;
      this.options = Object.keys(res1).map((key) => {
        let obj = {
          value: key,
          label: key,
          children: Object.keys(res1[key]).map((childKey) => ({
            value: childKey,
            label: childKey,
            children: Object.values(res1[key][childKey]).map((child1Key) => ({
              value: child1Key,
              label: child1Key,
            })),
          })),
        };
        return obj;
      });
    },
    handleNodeClick(data, node) {
      this.gradeId = node.parent.data.id;
      this.semesterYearName = node.data.id;
      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if(this.queryParams.gradeId!=""){
        listStudentscoretest(this.queryParams).then((response) => {
          this.studentscoretestList = response.rows;
          this.total = response.total+0;
          this.loading = false;
        })
      }
    },
    // // 取消按钮
    // cancel() {
    //   this.open = false;
    //   this.reset();
    // },
    // 表单重置
    // reset() {
    //   this.form = {
    //     studentId: null,
    //     studentName: null,
    //     gradeid: null,
    //     height: null,
    //     weight: null,
    //     leftEye: null,
    //     rightEye: null,
    //   };
    //   this.resetForm("form");
    // },
    //修改学生的个人信息
    handleEdit(index, row) {
      this.dialogVisible1 = true;
      this.form.name = row["学生姓名"];
      this.form.gradeId = row["班级"];
      this.form.tall = row["身高"];
      this.form.weight = row["体重"];
      this.form.eyesLeft = row["左眼"];
      this.form.eyeRight = row["右眼"];
    },
    //修改成绩一
    handleEdit1(index, row) {
      this.dialogVisible2 = true;
      this.form1.chinese = row["语文"];
      this.form1.math = row["数学"];
      this.form1.english = row["英语"];
      this.form1.science = row["科学"];
    },
    //修改成绩二
    handleEdit2(index, row) {
      this.dialogVisible3 = true;
      this.form2.xueke1 = row["学科1"];
      this.form2.pingjia1 = row["综合评价1"];
      this.form2.xueke2 = row["学科2"];
      this.form2.pingjia2 = row["综合评价2"];
    },
    //修改成绩三
    handleEdit3(index, row) {
      this.dialogVisible4 = true;
      this.form3.content1 = row["内容1"];
      this.form3.pingjia1 = row["综合评价1"];
      this.form3.content2 = row["内容2"];
      this.form3.pingjia2 = row["综合评价2"];
    },
    //修改成绩
    async updataAchievement() {
      let data = this.basicMessage;
      const res = await achevementUpdataAPI({ data });
      if (res.code == 200) {
        this.getList();
        this.handleExpandChange();
      }
    },
    //确定修改1
    queding1() {
      this.dialogVisible1 = false;
    },
    //确定修改2
    queding2() {
      this.dialogVisible2 = false;
      this.basicMessage["成绩"]["语文"]=this.form1.chinese
      this.basicMessage["成绩"]["数学"]=this.form1.math
      this.basicMessage["成绩"]["英语"]=this.form1.english
      this.basicMessage["成绩"]["科学"]=this.form1.science
      this.tableData1[0]["语文"] = this.basicMessage["成绩"]["语文"];
      this.tableData1[0]["数学"] = this.basicMessage["成绩"]["数学"];
      this.tableData1[0]["英语"] = this.basicMessage["成绩"]["英语"];
      this.tableData1[0]["科学"] = this.basicMessage["成绩"]["科学"];
      this.count++
      // this.updataAchievement();
    },
    //确定修改3
    queding3() {
      this.dialogVisible3 = false;
      this.basicMessage["综合评价等第"][this.form2.xueke1] = this.form2.pingjia1;
      this.basicMessage["综合评价等第"][this.form2.xueke2] = this.form2.pingjia2;
      let xuekeObj = {
        "道德与法治": [0, "综合评价1"],
        "体育": [0, "综合评价2"],
        "音乐": [1, "综合评价1"],
        "信息": [1, "综合评价2"],
        "美术": [2, "综合评价1"],
        "综合实践": [2, "综合评价2"],
      }
      let xueke1Obj = xuekeObj[this.form2.xueke1]
      this.tableData2[xueke1Obj[0]][xueke1Obj[1]] = this.form2.pingjia1
      let xueke2Obj = xuekeObj[this.form2.xueke2]
      this.tableData2[xueke2Obj[0]][xueke2Obj[1]] = this.form2.pingjia2
      this.count++
      // this.updataAchievement();
    },
    //确定修改4
    queding4() {
      this.dialogVisible4 = false;
      this.basicMessage["综合评价等第"][this.form3.content1] = this.form3.pingjia1;
      this.basicMessage["综合评价等第"][this.form3.content2] = this.form3.pingjia2;
      let contentObj = {
        "听课专注": [0, "综合评价1"],
        "做事负责": [0, "综合评价2"],
        "学习主动": [1, "综合评价1"],
        "同学合作": [1, "综合评价2"],
      }
      let content1Obj = contentObj[this.form3.content1]
      this.tableData3[content1Obj[0]][content1Obj[1]] = this.form3.pingjia1
      let content2Obj = contentObj[this.form3.content2]
      this.tableData3[content2Obj[0]][content2Obj[1]] = this.form3.pingjia2
      this.count++
      // this.updataAchievement();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/studentscoretest/export",
        {
          ...this.queryParams,
        },
        `studentscoretest_${new Date().getTime()}.xlsx`
      );
    },
    /** 导入学生成绩按钮操作 */
    handleImport() {
      this.upload.title = "学生成绩导入";
      this.upload.open = true;
    },
    /** 下载学生成绩模板操作 */
    importTemplate() {
      this.download(
        "/studentScore/importTemplate",
        {},
        `student_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
  },
};
</script>

<style>
.reportTitle {
  border-left: #9c0000 solid .3125rem;
  font-size: 1.125rem;
  position: absolute;
  left: .25rem;
  padding-left: 1.25rem;
}
</style>